<!-- 实习期管理转正式员工、实习期变更、实习期结束等弹出框 -->
<template>
  <a-modal
    width="50%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
    draggable
    title-align="center"
  >
    <template #title>
      <div v-if="type === 1">转试用期</div>
      <div v-else-if="type === 2">转正式员工</div>
      <div v-else-if="type === 3">实习期结束</div>
    </template>
    <div style="text-align: center">
      <IconFont
        type="icon-jinggao"
        :size="36"
        style="position: relative; top: 8px"
      ></IconFont>
      <h3 style="display: inline-block; margin-left: 10px">
        是否确认{{
          type === 1 ? '转试用期' : type === 2 ? '转正式员工' : '实习期结束'
        }}
        ?
      </h3>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    /* 
      1 转试用期
      2 转正式员工
      3 实习期结束
    */
    type: number;
  }>(),
  {
    visible: false
  }
);

const emit = defineEmits(['update:visible', 'intershipStateChange']);

const modalVisible = computed({
  get() {
    return props.visible;
  },
  set(visible: boolean) {
    emit('update:visible', visible);
  }
});

// 保存
const handleOk = () => {
  modalVisible.value = false;
  emit('intershipStateChange', props.type);
};

// 取消
const handleCancel = () => {
  modalVisible.value = false;
};
</script>

<style scoped lang="less">
.content {
  .dept {
    :deep(.arco-form-item-content-wrapper) {
      width: 200%;
    }
  }
}
</style>
